狀態變數state是記錄App內各種狀態的重要工具,今天就來講講要如何使用吧~
狀態變數是一種特殊變數,一旦被修改,使用該變數的元件會被重新渲染,是近代前端框架用來增加畫面渲染效率與避免畫面資料不一致的最重要技術。早期React Native在宣告元件的時候,都必須使用Class元件,以Class宣告的元件才具有狀態變數state,可用來處理資料,而Functional元件只能用來渲染畫面。但比起Functional元件,Class元件架構複雜且執行效率差,所以後來React Native官方就建議除了需要處理資料的元件,其他都用Functional元件。
Hook是React 16.8中增加的新機制,它讓我們用Functional元件就能使用state以及其他React的功能。
基礎的Hook有三種:
import React, { useContext, useState, useEffect } from "react";
useState是React提供的一種用來存取狀態變數的一種Hook機制。
useState回傳一個狀態變數複製品,以及更新狀態變數的函數,必需以const宣告
取得的狀態變數副本。
const [state, setState] = useState(initialState);
如果要更改狀態變數的值則要透過setState
setState(newState)
利用useContext可以設定全域變數,用法在下篇詳細介紹
使用useEffect可偵測某項狀態的改變進而重新渲染畫面,useEffect的用法之後也會有篇幅詳細介紹